// Vue.component(组件名字, { 组件配置选项 })


// xxxx.vue

Vue.component("my-counter", {
  template: `<div>
              <span>{{ label }}:</span>
              <button @click='add'>counter: {{ count }}, count101: {{ count101 }}</button>
            </div>`,
  props: ['label'],
  data () {
    return {
      count: 0
    }
  },
  computed: {
    count101() {
      return this.count * 10 + 1
    }
  },
  created() {
    console.log("my-counter created")
  },
  methods: {
    add() {
      this.count++
      this.$emit("my123", this.label)
    }
  }
})

const app = new Vue({
  el: "#app",
  data() {
    return {
      msg: "hello component!",
      counterList: [
        "first",
        "222",
        "三三"
      ],
      is: ""
    }
  },
  // 生命周期 ...
  created() {},
  computed: {},
  watch: {},
  methods: {
    my123Method(opt) {
      this.is = opt
      console.log("子组件传值成功")
    }
  },
  // components: {},
  // props: {},
  // template: {}
})
